<template>
  <div class="thirdPartyPage">
    <div class="thirdPartyList">
      <div
        class="thirdPartyItem"
        v-for="(item, index) in thirdPartyList"
        :key="index"
        :class="'thirdPartyItem_' + (index % 3)"
        @click="goTo(item)"
      > 
        <span class="icon sz_lockF lock" v-if="item.isLock =='1'"></span>
        <p class="name">{{ item.name }}</p>
        <p class="des">{{ item.description }}</p>
        <span class="more sz_arrowRight"></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      thirdPartyList: [
        // { name: "办公OA", des: "高效协同，办公神器", url: "", bgUrl: require("@/imgs/OA.png")},
        // { name: "一网统管", des: "全面管理，智能决策", url: "", bgUrl: require("@/imgs/oneNetwork.png") },
        // { name: "智慧应急", des: "高效协同，办公神器", url: "", bgUrl: require("@/imgs/emergency.png") },
        // { name: "智慧工业企业", des: "快速响应，智能教援", url: "", bgUrl: require("@/imgs/industrial.png") },
        // { name: "智慧健康", des: "智能生产，绿色环保", url: "", bgUrl: require("@/imgs/health.png") },
        // { name: "智慧消防", des: "智能防控，安全无忧", url: "", bgUrl: require("@/imgs/fireFighting.png") },
      ],
    };
  },
  mounted() {
    this.getThirdPartyData();
  },
  methods: {
    // 获取三方数据
    getThirdPartyData() {
      const userInfo = window.location.href.split('Info=')[1].split('&code=')[0];
      this.axios({
        url: "/seeyon/rest/select/settingsForm",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: {
          loginName: localStorage.getItem("loginName"),
          userInfo: userInfo
        },
      }).then((res) => {
        console.log("获取三方数据", res);
        this.thirdPartyList = res.data.data;
      });
    },
    goTo(item) {
      console.log("item", item);
      if(item.isLock == '1'){
        this.$message({
          message: '您没有此系统授权！',
          type: 'warning',
          customClass: 'custom-message-position'
        });
      }
      else{
        window.open(item.url, "_blank");
      }
      
    },
  },
};
</script>
<style lang="less" scoped>
.thirdPartyPage {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  .thirdPartyList {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .thirdPartyItem {
      position: relative;
      min-width: 170px;
      height: 100px;
      padding: 0 10px;
      position: relative;
      background-size: 100% 100%;
      cursor: pointer;
      .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 40px;
        margin-top: 30px;
      }
      .des {
        font-size: 12px;
        line-height: 30px;
      }
      .more {
        position: absolute;
        right: 10px;
        bottom: 5px;
      }
    }
    .lock{
      display: inline-block;
      // width: 20px;
      // height: 20px;
      color: #b7b7b7;
      // background-image: url("@/imgs/lock.png");
      background-repeat: no-repeat;
      // background-size: 100% 100%;
      position: absolute;
      top: 25px;
      right: 10px;
    }
    .thirdPartyItem_0 {
      color: #29aaea;
    }
    .thirdPartyItem_1 {
      color: #ea6856;
    }
    .thirdPartyItem_2 {
      color: #3d61f8;
    }
    .thirdPartyItem:nth-of-type(1) {
      background-image: url("@/imgs/OA.png");
    }
    .thirdPartyItem:nth-of-type(2) {
      background-image: url("@/imgs/oneNetwork.png");
    }
    .thirdPartyItem:nth-of-type(3) {
      background-image: url("@/imgs/emergency.png");
    }
    .thirdPartyItem:nth-of-type(4) {
      background-image: url("@/imgs/industrial.png");
    }
    .thirdPartyItem:nth-of-type(5){
      background-image: url("@/imgs/health.png");
    }
    .thirdPartyItem:nth-of-type(6){
      background-image: url("@/imgs/fireFighting.png");
    }
  }
}
</style>